import React, { FC, useEffect, useState } from 'react'
import { Swiper, Image } from 'react-vant'
import { getSiwper } from '@/api/article'
import { useNavigate } from 'react-router-dom'
const Swiper2: FC = () => {
  const [images, setImages] = useState([])
  const navigate = useNavigate()
  useEffect(() => {
    getSiwper()
      .then(({ data }) => {
        console.log(data)
        setImages(data.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  return (
    <div className="siwper">
      <div className="demo-swiper">
        <Swiper autoplay={5000}>
          {images.map((item: any) => (
            <Swiper.Item
              key={item.id}
              onClick={() => {
                // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
                navigate('/details/' + item.id, { state: item })
              }}
            >
              <Image lazyload src={item.cover} height={'316px'} />
              <h3>{item.title}</h3>
              <p>{item.views}阅读量</p>
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
    </div>
  )
}

export default Swiper2
